<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="排序因子">
        <el-select v-model="factory" clearable placeholder="请选择">
          <!--
            数据类型一定要和取出的json中的一致，否则没法回填
            因此，这里value使用动态绑定的值，保证其数据类型是number
          -->
          <el-option :value="`score`" label="进球数"/>
          <el-option :value="`pass`" label="传球数"/>
          <el-option :value="`shoot`" label="射门数"/>
          <el-option :value="`assist`" label="助攻数"/>
          <el-option :value="`playing_time`" label="上场时间(分钟)"/>
        </el-select>
      </el-form-item>

      <el-button type="primary" icon="el-icon-search" @click="getRank()">查询</el-button>
    </el-form>

    <div class="chart-container">
      <div id="chart" class="chart" style="height:500px;width:100%" />
    </div>
  </div>
</template>
<script>
  import playerRank from '@/api/dbwork/playData'
  import echarts from 'echarts'
  export default {
    data(){
      return{
        factory:'',
        name:[],
        data:[],
        chart:{},
      }
    },
    created() {
    },
    methods:{
      getRank(){
        if(this.factory === ''){
          this.$message({
            type: 'error',
            message: '请选择!'
          })
          return
        }
        playerRank.rank(this.factory)
        .then(response=>{
          this.name = response.data.name
          this.data = response.data.data
          this.chart = echarts.init(document.getElementById('chart'))
          var option;
          option = {
            title: {
              text: '球员数据排行',
              subtext: '数据为模拟数据'
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            legend: {
              data: ['2011年']
            },
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01]
            },
            yAxis: {
              type: 'category',
              data: this.name
            },
            series: [
              {
                name: this.factory,
                type: 'bar',
                data: this.data
              }
            ]
          };
          this.chart.setOption(option)
        })
      }
    }

  }
</script>
